<template>
  <div class="my">
    <!-- 上面部分 -->
    <div class="user">
      <div class="info">
        <!-- 左边用户信息 -->
        <div class="i_l">
          <div class="name">{{ userInfo.nickname }}</div>
          <div class="intro">{{ userInfo.intro }}</div>
        </div>
        <!--右边头像 -->
        <img class="i_r" :src="userInfo.avatar" alt="" />
      </div>
      <!-- 数据区域 -->
      <ul class="count">
        <li class="T1">
          <div class="T1_count">{{ userInfo.submitNum }}</div>
          <div class="T1_word">累计答题</div>
        </li>
        <li class="T1">
          <div class="T1_count">{{ userInfo.collectQuestions.length }}</div>
          <div class="T1_word">收藏题目</div>
        </li>
        <li class="T1">
          <div class="T1_count">{{ userInfo.errorQuestions.length }}</div>
          <div class="T1_word">我的错题</div>
        </li>
        <li class="T1">
          <div class="T1_count">
            {{
              (
                ((userInfo.submitNum - userInfo.errorNum) /
                  userInfo.submitNum) *
                100
              ).toFixed(0) + '%'
            }}
          </div>
          <div class="T1_word">正确率</div>
        </li>
      </ul>

      <!-- 岗位信息 -->
      <div class="jod">
        <van-cell title="我的岗位" is-link class="jod_tost">
          <template #icon>
            <i class="iconfont iconicon_mine_gangwei"></i>
          </template>
          <span>{{ userInfo.position }}</span>
        </van-cell>
      </div>
    </div>

    <!-- 下面部分 -->
    <div class="face">
      <div class="face_data">面经数据</div>
      <ul class="read">
        <li class="read_T1">
          <div class="read_count">
            昨日阅读<span class="mycolor"
              >+{{ userInfo.shareData.read.yesterday }}</span
            >
          </div>
          <div class="read_data">{{ userInfo.shareData.read.total }}</div>
          <div class="read_all">阅读总数</div>
        </li>
        <li class="read_T1">
          <div class="read_count">
            昨日获赞<span class="mycolor"
              >+{{ userInfo.shareData.star.yesterday }}</span
            >
          </div>
          <div class="read_data">{{ userInfo.shareData.star.total }}</div>
          <div class="read_all">获赞总数</div>
        </li>
        <li class="read_T1">
          <div class="read_count">
            昨日新增<span class="mycolor"
              >+{{ userInfo.shareData.comment.yesterday }}</span
            >
          </div>
          <div class="read_data">{{ userInfo.shareData.comment.total }}</div>
          <div class="read_all">评论总数</div>
        </li>
      </ul>
      <!-- 面经分享 -->
      <van-cell-group class="share">
        <van-cell title="我的面经分享" is-link class="share_tost">
          <template #icon>
            <i class="iconfont iconicon_mine_mianjing"></i>
          </template>
          <span>21</span>
        </van-cell>
        <van-cell title="我的消息" is-link class="share_tost">
          <template #icon>
            <i class="iconfont iconicon_mine_xiaoxi"></i>
          </template>
          <span>98</span>
        </van-cell>
        <van-cell title="收藏的题库" is-link class="share_tost">
          <template #icon>
            <i class="iconfont iconicon_mine_tikushoucang"></i>
          </template>
          <span>29</span>
        </van-cell>
        <van-cell title="收藏的企业" is-link class="share_tost">
          <template #icon>
            <i class="iconfont iconicon_mine_qiyeshoucang"></i>
          </template>
          <span>32</span>
        </van-cell>
        <van-cell title="我的错题" is-link class="share_tost">
          <template #icon>
            <i class="iconfont iconicon_mine_cuoti"></i>
          </template>
          <span>123</span>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
// 导入mapState
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  }
}
</script>

<style lang="less" scoped>
.my {
  .iconfont {
    font-size: 24px;
    padding-right: 10px;
  }
  .user {
    height: 220px;
    background: linear-gradient(45deg, #ce0031, #b8002c);
    .info {
      display: flex;
      padding: 31px 37px 0 15px;
      .i_l {
        flex: 1;
        justify-content: space-between;
        .name {
          font-size: 20px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #ffffff;
        }
        .intro {
          margin-top: 10px;
          opacity: 0.7;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
        }
      }
      .i_r {
        width: 50px;
        height: 50px;
        border: 3px solid rgba(255, 255, 255, 0.38);
        border-radius: 50%;
      }
    }
    .count {
      margin-top: 5px;
      display: flex;
      .T1 {
        flex: 1;
        justify-content: space-between;
        text-align: center;
        .T1_count {
          font-size: 20px;
          font-family: Helvetica;
          color: #ffffff;
          line-height: 50px;
          letter-spacing: 0px;
        }
        .T1_word {
          opacity: 0.7;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #ffffff;
          letter-spacing: 0px;
        }
      }
    }
    .jod {
      height: 55px;
      margin: 30px 15px 0;
      .jod_tost {
        border-radius: 5px;
      }
    }
  }

  .face {
    padding: 30px 15px 0 15px;
    .face_data {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 700;
      color: #181a39;
    }
    .read {
      display: flex;
      justify-content: space-between;

      margin-top: 15px;
      .read_T1 {
        flex: 1;
        text-align: center;
        .read_count {
          font-size: 14px;
          color: #b4b4bd;
          .mycolor {
            color: #00b8d4;
          }
        }
        .read_data {
          margin: 8px 0;
          font-size: 22px;
          color: #181a39;
        }
        .read_all {
          font-size: 12px;
          color: #545671;
        }
      }
    }
    .share {
      margin-top: 40px;
      .share_tost {
        height: 55px;
      }
    }
    .van-cell {
      border: none;
    }
  }
}
</style>
